<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>统计</title>
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="cont1">
        <div class="choose_wrap">
            <p class="choose">选择产品 ∨</p>
            <p class="choose">选择城市 ∨</p>
            <p class="choose">选择门店 ∨</p>
        </div>
        <div class="all">
            <table>
                <tr>
                    <td>城市</td>
                    <td>购买数</td>
                    <td>已使用数</td>
                    <td>已联系数</td>
                    <td>未联系数</td>
                </tr>
                <tr>
                    <td>上海</td>
                    <td>40</td>
                    <td>20</td>
                    <td>15</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>南京</td>
                    <td>40</td>
                    <td>20</td>
                    <td>15</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>成都</td>
                    <td>40</td>
                    <td>20</td>
                    <td>15</td>
                    <td>5</td>
                </tr>
            </table>
            <ul class="click">
                <li></li>
                <li><img src="img/click.png" /></li>
                <li><img src="img/click.png" /></li>
                <li><img src="img/click.png" /></li>
            </ul>
        </div>
        <div class="shadow">
            <div class="area">
                <div class="close"><img src="img/close.png" /></div>
                <h4 class="check">请勾选需要查看的门店</h4>
                <ul class="wrap"></ul>
            </div>
        </div>
        <div class="bottom"><img src="img/top.png" /></div>
    </div>
</body>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/index.js"></script>
<script>
    var cities = [],areas = [],stores = [];
    var choosed = [];
    $(".choose").on("click",function(){
        $(this).css("border","1px solid #f5822a");
        $(this).css("background","#ff9340");
        $(this).css("color","#fff");
        $(this).siblings().css("border","1px solid #c4c4c4");
        $(this).siblings().css("background","#f3f3f3");
        $(this).siblings().css("color","#666");
    });
    $("li").on("click",function(){
        $(".shadow").css("display","block");
        var index = $(this).index();
        var name = $("tr").eq(index).find("td").eq(0).text()+"市";
        cities = [];
        for(var i = 0;i < data.length; i++){
            for(var j = 0; j < data[i].cities.length; j++){  
                cities.push(data[i].cities[j]);
            }
        }
        areas = [];
        for(var n = 0 ; n < cities.length; n++){
            if(cities[n].name == name){
                for(var m = 0; m < cities[n].areas.length; m++){
                    areas.push(cities[n].areas[m].stores);
                }
            }
        }        
        stores = [];
        for(var a = 0 ; a < areas.length; a++){     
             for(var b = 0; b < areas[a].length; b++){
                 stores.push(areas[a][b].name);
             }           
        }
        var str = "";
        for(var c = 0; c < stores.length; c++){
            str += "<li><span class='storeName'>"+ stores[c] +"</span><img class='checkWrap' src='img/unchoose.png' /></li>";
        }
        $(".wrap").html(str);
        $(".checkWrap").on("click",function(){
            if($(this)[0].src == "file:///Users/tangdada/Desktop/ditui2.0/img/unchoose.png"){
                $(this).attr("src","img/choosed.png");
                $(this).siblings(".storeName").css("color","#ff9340");
            }else{
                $(this).attr("src","img/unchoose.png");
                $(this).siblings(".storeName").css("color","#454545");
            } 
            console.log($(this).siblings(".storeName").text());
            var clen = choosed.length;
            console.log(clen);
            if(clen == 0){
                choosed.push($(this).siblings(".storeName").text());
            }else{
                for(var i = 0; i < clen; i++){
                    if(choosed[i] == $(this).siblings(".storeName").text()){
                        choosed.splice(i,1); 
                    }else{
                        choosed.push($(this).siblings(".storeName").text());                     
                    }
                }
            }  
            console.log(choosed);      
        });
    });
    $(".close").on("click",function(){
        $(".shadow").css("display","none");
    });
    
</script>
</html>